<template>
  <div class="app-container">
    <el-form
      v-show="showSearch"
      ref="queryForm"
      :model="queryParams"
      :inline="true"
    >
      <el-form-item :label="$t('roleCode')" prop="code">
        <el-input
          v-model="queryParams.code"
          :placeholder="$t('inputRoleCode')"
          clearable
          size="small"
          style="width: 160px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item :label="$t('roleZHName')" prop="name_zh">
        <el-input
          v-model="queryParams.name_zh"
          :placeholder="$t('inputRoleZHName')"
          clearable
          size="small"
          style="width: 160px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item :label="$t('roleENName')" prop="name_en">
        <el-input
          v-model="queryParams.name_en"
          :placeholder="$t('inputRoleENName')"
          clearable
          size="small"
          style="width: 160px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item :label="$t('roleDesc')" prop="content">
        <el-input
          v-model="queryParams.content"
          :placeholder="$t('inputRoleDesc')"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
        >{{ $t("search") }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{
          $t("reset")
        }}</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          v-show="rbac.create"
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >{{ $t("addBtn") }}</el-button>
      </el-col>
      <right-toolbar :show-search.sync="showSearch" @queryTable="getList" />
    </el-row>

    <el-table
      v-loading="loading"
      :data="roleList"
      border
      @sort-change="sortChange"
    >
      <el-table-column
        :label="$t('roleCode')"
        sortable
        prop="code"
        width="120"
      />
      <el-table-column
        :label="$t('roleZHName')"
        prop="name_zh"
        sortable
        :show-overflow-tooltip="true"
        min-width="150"
      />
      <el-table-column
        :label="$t('roleENName')"
        prop="name_en"
        :show-overflow-tooltip="true"
        min-width="150"
      />
      <el-table-column
        :label="$t('roleDesc')"
        prop="content"
        :show-overflow-tooltip="true"
        min-width="300"
      />
      <el-table-column
        align="center"
        :label="$t('administrator')"
        prop="is_admin"
        width="120"
      >
        <template slot-scope="scope">
          <DataStatus :status="scope.row.is_admin" />
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('operate')"
        align="center"
        width="250"
        class-name="fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            v-show="rbac.inquiry"
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleDetail(scope.row)"
          >{{ $t("detailBtn") }}</el-button>
          <el-button
            v-show="rbac.update"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
          >{{ $t("modifyBtn") }}</el-button>
          <el-dropdown
            v-show="rbac.more"
            size="mini"
            trigger="click"
            @command="(command) => handleCommand(command, scope.row)"
          >
            <span class="el-dropdown-link">
              <i class="el-icon-d-arrow-right el-icon--right" />{{
                $t("moreBtn")
              }}
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-show="rbac.assigning"
                command="handleAssignUsers"
                icon="el-icon-user"
              >{{ $t("assignUserBtn") }}</el-dropdown-item>
              <el-dropdown-item
                v-show="rbac.authorize"
                command="handleAuthorize"
                icon="el-icon-connection"
              >{{ $t("authorizeBtn") }}</el-dropdown-item>
              <el-dropdown-item
                v-show="rbac.delete"
                command="handleDelete"
                icon="el-icon-delete"
              >{{ $t("deleteBtn") }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.page_size"
      @pagination="getList"
    />
    <RoleSheet ref="roleSheet" @refreshList="getList" />
    <RoleInquire ref="roleInquire" />
    <RoleAuthorize ref="roleAuthorize" />
    <RoleAssignUser ref="roleAssignUser" />
  </div>
</template>

<script>
import store from '@/store';
import { mapGetters } from 'vuex';
import { deleteRoleListApi } from '@/views/rbac/api/rbac.api';
import RoleInquire from '@/views/rbac/components/RoleInquire';
import RoleSheet from '@/views/rbac/components/RoleSheet';
import RoleAuthorize from '@/views/rbac/components/RoleAuthorize';
import RoleAssignUser from '@/views/rbac/components/RoleAssignUser';

export default {
  name: 'Role',
  components: {
    RoleSheet,
    RoleInquire,
    RoleAuthorize,
    RoleAssignUser
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        page: 1,
        page_size: 10,
        code: undefined,
        name_zh: undefined,
        name_en: undefined,
        content: undefined,
        is_admin: undefined,
        ordering: undefined
      },
      rbac: {
        create: false,
        update: false,
        inquiry: false,
        delete: false,
        authorize: false,
        assigning: false,
        more: false
      }
    };
  },
  computed: {
    ...mapGetters(['roleList'])
  },
  created() {
    this.handleRbac();
    this.getList();
  },
  methods: {
    /** 查询角色列表 */
    async getList() {
      this.loading = true;
      var resp = await store.dispatch('rbac/getRoleList', this.queryParams);
      if (resp.success) {
        this.total = resp.data.count;
        this.loading = false;
      } else {
        this.targaMessageBox(this, resp.msg);
        this.loading = false;
      }
    },
    handleRbac() {
      // 该页面比较特殊,使用原始的按钮操作鉴权方法,允许未授权的管理员访问该页面的全部功能,其余页面不建议这么写
      var operateList = this.handleMenuPermission(this)
      if (operateList.length === 0) {
        this.rbac.inquiry = true
        this.rbac.create = true
        this.rbac.update = true
        this.rbac.delete = true
        this.rbac.authorize = true
        this.rbac.assigning = true
        this.rbac.more = true
      }
      if (operateList.includes('INQUIRY')) {
        this.rbac.inquiry = true
      }
      if (operateList.includes('CREATE')) {
        this.rbac.create = true
      }
      if (operateList.includes('UPDATE')) {
        this.rbac.update = true
      }
      if (operateList.includes('DELETE')) {
        this.rbac.delete = true
      }
      if (operateList.includes('AUTHORIZE')) {
        this.rbac.authorize = true
      }
      if (operateList.includes('ASSIGNING')) {
        this.rbac.assigning = true
      }
      if (this.rbac.assigning === false && this.rbac.authorize === false && this.rbac.delete === false) {
        this.rbac.more = false
      } else {
        this.rbac.more = true
      }
    },
    sortChange({ prop, order }) {
      var ordering;
      if (order === 'ascending') {
        ordering = '' + prop;
      } else if (order === 'descending') {
        ordering = '-' + prop;
      } else {
        ordering = undefined;
      }
      this.queryParams.ordering = ordering;

      this.getList();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.$refs.queryForm.resetFields();
      this.handleQuery();
    },
    // 更多操作触发
    handleCommand(command, row) {
      switch (command) {
        case 'handleAuthorize':
          this.handleAuthorize(row);
          break;
        case 'handleDelete':
          this.handleDelete(row);
          break;
        case 'handleAssignUsers':
          this.handleAssignUsers(row);
          break;
        default:
          break;
      }
    },
    handleUpdate(row) {
      this.$refs.roleSheet.openSheetDialog({ ...row });
    },
    handleDetail(row) {
      this.$refs.roleInquire.openSheetDialog({ ...row });
    },
    handleAuthorize(row) {
      this.$refs.roleAuthorize.openSheetDialog({ ...row });
    },
    handleAssignUsers(row) {
      this.$refs.roleAssignUser.openSheetDialog({ ...row });
    },
    handleAdd() {
      this.$refs.roleSheet.openSheetDialog(undefined);
    },
    handleDelete(row) {
      this.$confirm(
        this.$t('dataDeleteConfirm', {
          title: this.$t('roleCode'),
          value: row.code
        }),
        this.$t('warning'),
        {
          confirmButtonText: this.$t('confirm'),
          cancelButtonText: this.$t('cancel'),
          cancelButtonClass: 'btn-cancel-to-right',
          type: 'warning'
        }
      ).then(async() => {
        var resp = await deleteRoleListApi(row.id);
        if (resp.success) {
          this.targaMessage(
            this.$t('deleteSuccess', {
              title: this.$t('roleCode'),
              value: row.code
            })
          );
          this.getList();
        } else {
          this.targaMessageBox(this, resp.msg);
        }
      });
    }
  }
};
</script>
